<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title></title>

  <!-- 引入vue -->
  <script src="../plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 引用element-ui -->
  <link rel="stylesheet" href="../plugins/element-ui/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../plugins/element-ui/index.js" charset="utf-8"></script>
  <!-- 引用axios -->
  <script src="../plugins/axios/axios.min.js" charset="utf-8"></script>

  <style>
      .addqu {
          font-weight: 800;
          font-size: 25px;
          line-height: 40px;
          text-align: center;
          color: dodgerblue;
      }

      .background {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: -1;
          background-image: url("../img/Catalina.jpeg");
          background-repeat: no-repeat;
          background-size: cover;
          /*opacity: 0.5;*/
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/loginPic.png');
          background-position: center center;
      }

      * {
          margin: 0;
          padding: 0;
      }

      #app {
          z-index: 1;
          margin-top: 100px;
          width: 1200px;
          height: 700px;
          border: 1px rgb(235,235,235) solid;
          border-radius: 10px;
          padding: 20px;
          text-align: center;
          background-color: rgba(255,255,255,0.8);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
      }

      。1 {
          color: aquamarine;
          font-size: 13px;
      }

  </style>
</head>
<body>
<div class="background">
  <img :src="imgSrc" width="100%" height="100%" alt=""/>
</div>


<div class="BoxBOX">
  <br>
  <div class="loginInputBox" id="app">
    <p class="addqu"> 新增问卷</p>
    <br/>
    <br/><br/>
    <br/>
    <el-input placeholder="请输入问卷名" v-model="questionNaireName">
      <template slot="prepend"> 问卷名 ：</template>
    </el-input>
    <br/>
    <br/><br/>


    <!-- <el-button type="primary" @click="login()" round class="LoginButton" name="LoginButton" id="LoginButton" class="submitbutton"  onmouseover="this.className='submitbutton submitbutton_hover';" onmouseout="this.className='submitbutton';" style="color:White;">取消</el-button>
     <el-button type="primary" @click="login()" round class="LoginButton" name="LoginButton" id="LoginButton" class="submitbutton"  onmouseover="this.className='submitbutton submitbutton_hover';" onmouseout="this.className='submitbutton';" style="color:White;">确定</el-button>
     -->


    <el-transfer
            v-model="value" :data="tableData"
            style="text-align: left; display: inline-block"
            v-model="rolesle"
            :titles="['未选择问题', '已选择问题']"
            :button-texts="['退回', '选择']"
            :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}',
                        }"
            @change="handleChange"
            :data="roleInherit"
            :props="{
                          key: 'id',
                          label: 'description',
                          disabled:'status'
                          }"
    >

    </el-transfer>
    <div>
      <br/><br/>
      <br/><br/>


    </div>
    <el-button type="primary" @click="back" round>返回</el-button>
    <el-button type="primary" @click="submit" round>确定</el-button>


  </div>

</div>

<script type="text/javascript">

    let vm = new Vue({
        el: "#app",
        data: {
            tableData: [],
            value: [],
            bcalldata: [],
            leftvalue: [],
            rightvalue: [],

            questionNaireName: "",

            id: "",
            creator: "",
            log: 'false',

        },

        methods: {
            submit() {
                let data = {
                    "questionNaireName": this.questionNaireName,
                    "questionIds": this.rightvalue,
                }
                axios.post("http://localhost:8080/questionnaire", data)
                    .then(res => {
                        this.$message({
                            showClose: true,
                            message: '恭喜你，问卷创建成功',
                            type: 'success'
                        });
                        // this.refresh();
                    })
            },
            handleChange(value, direction, movedKeys) {
                //  console.log(value, direction, movedKeys);
                if (direction === 'right') {
                    movedKeys.forEach((key) => {
                        let index = this.leftvalue.findIndex((item) => item === key)
                        this.leftvalue.splice(index, 1)
                    })
                    movedKeys.forEach((key) => {
                        this.rightvalue.push(key)
                    })
                } else {
                    movedKeys.forEach((key) => {
                        let index = this.rightvalue.findIndex((item) => item === key)
                        this.rightvalue.splice(index, 1)
                    })
                    movedKeys.forEach((key) => {
                        this.leftvalue.push(key)
                    })
                }
            },
          back(){
            window.location.href = "Register.html";
            window.location.href = "ReplierOperation.html";
          }

        },


        created() {//初始化所调用的方法
            // //alert(this.$url);
            // console.log(${this.$url});
            axios.get("http://localhost:8080/questionnaire")
                .then(res => {
                    // console.log(this.tableData);
                    // console.log(res.data);
                    this.tableData = res.data.data;

                    // this.tableData.forEach(function(item, index, array){
                    //
                    // });
                    // console.log(this.tableData);
                })
        },
    })
</script>
</body>

</html>
